<template>
	<div class="home">
		<!-- <Banner /> -->
		<Classify @GoodsTopList="GoodsTopList" />
		<div class="cate">
			<!-- <FruitList ref="FruitList" /> -->
			<div class="like">
				<div class="goods-list">
					<div v-for="(item, index) in GoodsListData" :key="index" class="goods-item" @click="todetail(item)">
						<div class="goods-img">
							<img :src="item.defaultAlbum" alt="">
						</div>
						<div class="goods-info">
							<div class="goods-info-left">
								<div class="name">
									{{ item.cProductShowName }}
								</div>
								<div class="price_box">
									<div class="price">
										￥{{ item.fSalePrice }}
									</div>
									<div class="text">
										已有{{ item.iSales }}人付款
									</div>
								</div>
							</div>
							<div class="goods-info-right">
								<img class="item_img" :src="item.FocusStatus? guanzhu : notguanzhu"
									@click.stop="focus(item)">
							</div>
						</div>
					</div>
				</div>
				<div class="more" @click="getMore" v-if="isMore">点击查看更多</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Banner from '../components/home/banner.vue'
	import Classify from "../components/fruit/classify.vue"
	// import FruitList from '../components/fruit/fruit_list.vue'
	import guanzhu from '../assets/img/zan_selected.png'; // 已关注
	import notguanzhu from '../assets/img/zan.png'; // 未关注
	export default {
		name: 'Fruit',
		components: {
			Banner,
			Classify,
			// FruitList
		},
		data() {
			return {
				notguanzhu: notguanzhu, // 未关注
				guanzhu: guanzhu, // 已关注
				GoodsListData: [], // 商品数据
				AllGoodsListPage: 1, // 商品总页数
				ScreeningObj: {
					// 筛选条件
					classifyId: "", // 分类，
					regionId: "", // 地区，
					areaId: "", // 排序，
					keywords: "", // 搜索
					PriceSorting: 0, // 价格排序
				},
				pageindex: 1,
				isMore: true
			}
		},
		created() {},
		watch:{
			"$store.getters.getDemoValue":function(){
				console.log(333)
				this.ScreeningObj.keywords = this.$store.getters.getDemoValue
				this.GoodsTopList(this.ScreeningObj.classifyId, this.ScreeningObj.regionId, this.ScreeningObj.areaId, this
						.ScreeningObj.keywords, this.ScreeningObj.PriceSorting)
			}
		},
		mounted() {
			console.log(444)
			this.ScreeningObj.keywords = this.$route.query.input
			this.GoodsTopList(this.ScreeningObj.classifyId, this.ScreeningObj.regionId, this.ScreeningObj.areaId, this
					.ScreeningObj.keywords, this.ScreeningObj.PriceSorting)
		},
		methods: {

			getMore() {
				this.pageindex++
				this.GoodsTopList(this.ScreeningObj.classifyId, this.ScreeningObj.regionId, this.ScreeningObj.areaId, this
					.ScreeningObj.keywords, this.ScreeningObj.PriceSorting,1)
			},
			// 商品列表---分类，地区，排序，搜索组件值
			/*
			 * classifyId, 分类
			 * regionId, 地区
			 * areaId, 排序
			 * keywords 搜索
			 * PriceSorting:0 , 价格排序
			 */
			GoodsTopList(classifyId, regionId, areaId, keywords, PriceSorting,type) {
				if(type != 1){
					this.GoodsListData = []
					this.pageindex = 1
					this.isMore = true
				}
				this.ScreeningObj = {
					classifyId: classifyId,
					regionId: regionId,
					areaId: areaId,
					keywords: keywords,
					PriceSorting: PriceSorting,
				}
				
				// this.GoodsListData = []
				let orders = [] // 排序数组 
				let classifyIdType = '' // 分类id
				let regionIdType = ''
				if (classifyId === 0) {
					classifyIdType = ""
				} else {
					classifyIdType = classifyId
				}
				if (classifyId === 0) {
					regionIdType = ''
				} else {
					regionIdType = regionId
				}
				let DIRECTIONType = {
					fieldname: '',
					direction: ''
				}
				// 判断排序方式
				if (areaId === '') { // 初次加载时
					DIRECTIONType = {
						fieldname: 'iOrder',
						direction: 'asc'
					}
					orders.push(DIRECTIONType)
				} else if (areaId === 'iOrder') { // 默认方式
					DIRECTIONType = {
						fieldname: 'iOrder',
						direction: 'asc'
					}
					orders.push(DIRECTIONType)
				} else if (areaId === 'fSalePrice') {
					if (PriceSorting === 0) { // 如果为0，则默认排序
						DIRECTIONType = {
							fieldname: 'iOrder',
							direction: 'asc'
						}
						orders.push(DIRECTIONType)
					} else if (PriceSorting === 1) { // 为1则升序
						DIRECTIONType = {
							fieldname: 'fSalePrice',
							direction: 'asc'
						}
						orders.push(DIRECTIONType)
					} else if (PriceSorting === 2) { // 为2则为降序
						DIRECTIONType = {
							fieldname: 'fSalePrice',
							direction: 'desc'
						}
						orders.push(DIRECTIONType)
					}
				}
				let goodData = {
					queryCondition: {
						order: orders, // 排序方式
						pageindex: this.pageindex,
						pagesize: 20,
						where: [{
								fieldname: "categoryid", // 商品分类id
								valuefrom: classifyIdType,
							},
							{
								fieldname: "area_id", // 区域id
								valuefrom: regionIdType,
							},
							{
								fieldname: "keyword", // 搜索关键词
								valuefrom: keywords,
							}
						],
					}
				}
				this.$api.commit.GetProductList(goodData).then(res => {
					console.log('商品数据11111111111111111111111111111111111111111111111111111111111111111', res.data
						.data)
					// this.getProductFavoritesFun(res.data.data)
					if (res.data.data.length == 0||res.data.data.length<20) {
						this.isMore = false
					}else{
						this.isMore = true
					}
					if (areaId === 'fSalePrice') {
						if (PriceSorting === 0) { // 如果为0，则默认排序
							this.GoodsListData = this.GoodsListData.concat(res.data.data)
							this.getProductFavoritesFun(this.GoodsListData)
						} else if (PriceSorting === 1) { // 为1则升序
							this.GoodsListData = (this.GoodsListData.concat(res.data.data)).sort(this.Compare(
								'fSalePrice'))
							this.getProductFavoritesFun(this.GoodsListDataa)
						} else if (PriceSorting === 2) { // 为2则为降序
							this.GoodsListData = (this.GoodsListData.concat(res.data.data)).sort(this.UnCompare(
								'fSalePrice'))
							this.getProductFavoritesFun(this.GoodsListData)
						}
					} else {
						this.GoodsListData = this.GoodsListData.concat(res.data.data)
						this.getProductFavoritesFun(this.GoodsListData)
					}
				})
			},
			// 价格升序排序
			Compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			},
			// 价格降序排序
			UnCompare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1;
				}
			},
			// 获取个人收藏列表
			getProductFavoritesFun(datalist) {
				let params = {
					token: localStorage.getItem('token'),
					data: {
						classId: '',
						productName: '',
						tagId: '',
						currentPage: 1,
						pagesize: 10000,
					}
				}
				this.$api.person.getProductFavorites(params).then(res => {
					this.FavorList = res.data.pager.data
					console.log('数据列表', datalist)
					this.SearchFavorites(this.FavorList, datalist)
				})
			},
			// 查询该商品是否被关注
			/**
			 * FavorList 关注列表
			 * LikeList 商品信息列表
			 */
			SearchFavorites(FavorList, LikeList) {
				console.log('猜你喜欢关注列表', FavorList, LikeList)
				LikeList.forEach(element => {
					let results = FavorList.map(a => a.pid).indexOf(element.goods === undefined ? element.pid :
						element.goods.pid)
					if (results === -1) {
						this.$set(element, 'FocusStatus', false)
					} else {
						this.$set(element, 'FocusStatus', true)
					}
				})
			},

			// 关注
			focus(focus) {
				console.log('关注', focus)
				if (focus.FocusStatus) {
					let del = {
						token: localStorage.getItem('token'),
						data: {
							productId: focus.goods === undefined ? focus.pid : focus.goods.pid
						}
					}
					this.$api.good.delFavoritesByProductId(del).then(res => {
						if (res.code == 200) {
							this.GoodsListData = []
							this.GoodsTopList() // 获取商品列表
							this.$message.success(res.message)
						} else {
							this.$message.error(res.message);
						}
					});
				} else {
					let params = {
						token: localStorage.getItem('token'),
						data: {
							iShopIds: focus.shop_id === undefined ? focus.shop.id : focus.shop_id,
							ids: focus.goods === undefined ? focus.pid : focus.goods.pid
						}
					}
					this.$api.good.addToCollect(params).then(res => {
						if (res.code == 200) {
							this.GoodsListData = []
							this.GoodsTopList() // 获取商品列表
							this.$message.success(res.message);
						} else {
							this.$message.error(res.message);
						}
					})
				}
			},

			// 去详情
			todetail(todetail) {
				console.log('去详情', todetail)
				this.$router.push({
					path: "/fruit/detail",
					query: {
						id: todetail.pid,
						iShopId: todetail.iShopId
					},
				});
			},

			//在页面离开时记录滚动位置
			beforeRouteLeave(to, from, next) {
				console.log('router.afterEach', to, from, next)
				this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
				console.log(this.scrollTop)
				next()
			},

			//进入该页面时，用之前保存的滚动位置赋值
			beforeRouteEnter(to, from, next) {
				console.log('router.afterEach', to, from, next)
				next(vm => {
					document.body.scrollTop = vm.scrollTop
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cate {
		.like {
			padding: 0 16.19rem;
			margin-top: 2.19rem;
			display: flex;
			flex-direction: column;

			.goods-list {
				margin-top: 1.88rem;
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				.goods-item {
					width: 24%;
					height: 25.88rem;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 1%;
					margin-bottom: 1rem;
					cursor: pointer;
					background: #fff;
					padding: 1rem 0;

					&:nth-child(4n) {
						margin-right: 0;
					}

					.goods-img {
						width: 100%;
						height: 20.94rem;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #fff;

						img {
							width: 16rem;
							height: 16rem;
							object-fit: contain;
						}
					}

					.goods-info {
						width: 17.1rem;
						margin-top: 1.5rem;
						height: 6rem;
						display: flex;
						justify-content: space-between;
						align-content: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						.goods-info-left {
							display: flex;
							flex-direction: column;
							width: 80%;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;

							.name {
								font-size: 1.13rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 100%;
								display: flex;
								align-items: center;
								height: 3rem;
							}

							.price_box {
								display: flex;
								align-items: center;
								height: 3rem;

								.price {
									font-size: 1.5rem;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: rgba(243, 64, 111, 1);
								}

								.text {
									font-size: .8rem;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: #666;
									margin-left: 1rem;
									margin-top: .7rem;
								}
							}
						}

						.goods-info-right {
							display: flex;
							align-items: center;
							justify-content: center;

							.item_img {
								width: 1.5rem;
								height: 1.4rem;
							}
						}
					}
				}
			}

			.more {
				padding: 2rem 0;
				text-align: center;
				cursor: pointer;
			}
		}
	}
</style>
